<template>
	<div class="body">
		<div class="login-container">
			<h2 class="login-title">Login</h2>
			<el-form class="login-form" ref="loginForm" :model="loginData" :rules="rules">
				<el-form-item class="login-form-item" prop="userName">
					<el-input v-model="loginData.username" placeholder="用户名"></el-input>
				</el-form-item>
				<br>
				<el-form-item class="login-form-item" prop="password">
					<el-input v-model="loginData.password" @keydown.native.enter="login('loginForm')" placeholder='密码'
						show-password></el-input>
				</el-form-item>
				<el-button class="login-button" type="primary" @click="login('loginForm')">登录</el-button>
			</el-form>
			<div style="text-align: center; margin-top: 10px;">
				<a href="/register">没有账号?点我注册</a>
			</div>
		</div>
	</div>
</template>

<style>
	.body {
		animation: gradientAnimation 10s infinite;
		background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 800% 800%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		font-family: 'Arial', sans-serif;
	}

	.login-container {
		background: #fff;
		width: 400px;
		padding: 20px;
		border-radius: 4px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.login-title {
		text-align: center;
		font-size: 24px;
		margin-bottom: 20px;
		color: #333;
	}

	.login-form {
		display: flex;
		flex-direction: column;
	}

	.login-form-item {
		margin-bottom: 10px;
	}

	.login-button {
		margin-top: 20px;
	}

	.login-error {
		text-align: center;
		color: red;
		margin-top: 10px;
	}

	@keyframes gradientAnimation {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}
</style>

<script>
	import router from '@/router';
	export default {
		data() {
			return {
				loginData: {
					username: '',
					password: '',
				},
				errorMessage: '',
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 15,
							message: '长度在 6 到 15 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: '长度在 8 到 15 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},
		computed: {},


		methods: {
			login(loginForm) {
				this.$refs[loginForm].validate((valid) => {
					if (valid) {
						this.$http.post('/user/login', this.loginData).then(resp => {
							if (resp.data.result) {
								let permissions = resp.data.permissions;
								let token = resp.data.token;
								localStorage.setItem("token", token);
								localStorage.setItem("permissions", permissions);
								this.$router.push({
									name: 'announce'
								})
								this.$message({
									message: '登录成功',
									type: 'success',
									duration: 1200
								})
							} else {
								this.$message({
									message: '登录失败',
									type: 'error',
									duration: 1200
								})
							}
						})
					}
				});


			},
			logout() {
				//发请求退出登录
				let that = this;
				that.$http.post('/user/login').then(resp => {
					if (resp.data.code === 200) {
						that.$message({
							message: '退出登录',
							type: 'info',
							duration: 1200
						})
						that.$router.push({
							name: 'login'
						})
					}
				})
			}
		},
		created() {}
		// created: function (){
		//   //发请求
		//   this.axios.get("/api/users/isLogin").then(response => {
		//     const data = response.data;
		//     if (data.code === 200) {
		//       this.$confirm('您已登录！是否重新登录？', '提示', {
		//         confirmButtonText: '是',
		//         cancelButtonText: '否',
		//         type: 'warning'
		//       })
		//           .then(() => {
		//             // 用户选择登录，进行页面跳转到登录页
		//             this.logout();
		//             window.location.href = '/login.html';
		//           })
		//           .catch(() => {
		//             // 用户选择不登录，返回主页或其他操作
		//             window.location.href = '/';
		//           });
		//
		//       //已登录自动跳转
		//       // window.location.href = '/';
		//     }else {
		//       //未登录清空localStorage
		//       localStorage.clear();//清空登录成功时保存的数据
		//     }
		//
		//   })
		// }
	}
</script>